<?session_start();?>
<?php require_once 'xhtmlHeader.php';
//unset($_SESSION)

?>
    <script>
     function interruptor(parte) { 
      parrafo = document.getElementById(parte); 
      switch(parrafo.style.display) {  
         case "inline"   :  
         case ""         :   parrafo.style.display = "none";  
                        break; 
         case "none"      :    parrafo.style.display = "inline";  
                        break; 
      }
	  switch(parrafo.style.visibility) {  
         case "visible"   :  
         case ""         :   parrafo.style.display = "hidden";  
                        break; 
         case "hidden"      :    parrafo.style.display = "visible";  
                        break; 
      }
   }
   
   function oculta(){ 
      document.getElementById("comoFun").style.display = "none";
	  document.getElementById("tablaTem").style.display = "none";
	  document.getElementById("artesa").style.display = "none";
	  document.getElementById("guardia").style.display = "none";
	  document.getElementById("idealis").style.display = "none";
	  document.getElementById("racion").style.display = "none";
	 
   } 
    </script>


 	<body onload="oculta()">
	
	<div id="cuerpo">
	 <?php require_once 'vars.php'; 
	 ?>
	 <?php require_once 'cabecera.php';?>
	 <?php //require_once 'login.php';?>
		<div id="contenido">
			<?php
				require 'config_bbdd.php';
				//Si no se puede conectar a la BBDD 
				if (! @mysql_select_db("usersFB",$myconn)){
					echo "<p>Error al conectar a la BBDD.</p>";
					exit();
				}
				else{
					//$user=1;//Variable para pruebas.
					//Saluda al usuario por su nombre.
					if (!isset($_SESSION["nombreUser"]))
						//require_once 'sacaVariablesSesion.php';
						require_once 'vars.php';

					//if (!isset($me))
						echo "<p>Hola ", $me['first_name'],", bienvenido a Moodvie</p> \n";
						//echo "<p>tu ID de usuario es ",$_SESSION["idUser"],"</p>";
					//else
					//	echo "<p>Hola ", $_SESSION["nombreUser"],"</p> \n";	
					//echo "<p>Tu userID en nuestra app es ", $_SESSION["idUser"],"</p> \n";	
					//echo "<p>Tu userID en FB es ", $_SESSION["idFBUser"],"</p> \n";	
					
									
					if (!isset($_SESSION["provinciaUser"]))
//						echo "<p>Lugareño de la provincia ", $_SESSION["provinciaUser"],"</p> \n";
	//				else 
						echo "<p>Aún no has seleccionado tu provincia. Hazlo <a href=\"configuracion.php\">aquí</a></p> \n";
					if (cargaTemperamento($_SESSION["idUser"])){
						
						echo "<div id=\"piechart\"> ";
							echo "<table class=\"tablaTemperamentos\" summary=\"Porcentaje de temperamentos\">
							<tr>
							<th>Guardián</th>
							<th>Artesano</th>
							<th>Idealista</th>
							<th>Racional</th>
							</tr>
							<tr>
							<td>".$_SESSION["userGuardian"]."%</td>
							<td>".$_SESSION["userArtesano"]."%</td>
							<td>".$_SESSION["userIdealista"]."%</td>
							<td>".$_SESSION["userRacional"]."%</td>
							</tr>
							</table>";
							echo "<br />";
							//TODO intentar hacerlo con piechart.php en lugar de googleapis
							//echo "<img src=\"piechart.php?data=$trnk[1]*$trnk[2]*$trnk[3]*$trnk[4]&label=Guardian*Artesano*Idealista*Racional\" />";
							echo "<img src=\"http://chart.googleapis.com/chart?cht=p3&chd=t:".$_SESSION["userGuardian"].",".$_SESSION["userArtesano"].",".$_SESSION["userIdealista"].",".$_SESSION["userRacional"]."&chs=255x100&chl=Guardian|Artesano|Idealista|Racional\" />";
							//<img src="piechart.php?data=$15*20*20*15&label=Guardian*Artesano*Idealista*Racional" />
						echo "</div>";
					}
					else
						echo "Aún no has hecho el <a href=\"test.php\"> test</a>. ¡Necesitas hacerlo para que tengamos tu temperamento!";
				}
				
			?>  
			<p>
				<a href="#" class="fb2" onclick="interruptor('comoFun')">¿Cómo funciona?</a>
				<br /><br/>
				<div id="comoFun">
					<p>Para poder recomendarte una película la aplicación se basa en la teoría de los temperamentos, según la cual, cada persona es una combinación de <span class=normalLink><a href="#" onclick="interruptor('tablaTem')">4 temperamentos básicos</a></span>.</p>
					<div id="tablaTem">
						<table border="0" id="tablaTempe">
							<thead>
							<tr>
							<th><span class="fbTipoTemperamento"><a href="#" onclick="interruptor('artesa')">Artesano</a></span></th>
							<th><span class="fbTipoTemperamento"><a href="#" onclick="interruptor('guardia')">Guardian</a></span></th>
							<th><span class="fbTipoTemperamento"><a href="#" onclick="interruptor('idealis')">Idealista</a></span></th>
							<th><span class="fbTipoTemperamento"><a href="#" onclick="interruptor('racion')">Racional</a></span></th>
							</tr>
							</thead>
							<tr>
							<td class="pequeno" valign="top">
								<div id="artesa">
								La habilidad natural de destacar en algún arte, desde las bellas artes hasta el arte de la dialéctica o los negocios. Amantes de la diversión, realistas pero optimistas, disfrutan del presente. 
								Creativos y espontáneos, en busca de causar impacto en los demás. Confían en sus impulsos, creen que todo les saldrá bien.
								</div>
							</td>
							<td class="pequeno" valign="top">
								<div id="guardia">
								Piedra angular de la sociedad, entregados a servir y preservar las instituciones. Cran capacidad de gestión de bienes y servicios. Buenos supervisores. Personas leales, obedientes, responsables y muy trabajadoras. Actúan con cautela, buscan seguridad en sus vidas. Adoran la justicia y la pertenencia a un grupo.
								</div>
							</td>
							<td class="pequeno" valign="top">
								<div id="idealis">
								Pasionales y entregados al crecimiento personal. Se esfuerzan en descubrir su verdadero yo, en mejorar como personas. Disfrutan ayudando a la gente y creando vínculos. Anhelan una vida romántica y la sabiduría. Intensos y espirituales. Gente muy auténtica, querida y ética en sus acciones.
								</div>
							</td>
							<td class="pequeno" valign="top">
								<div id="racion">
								Resolutores de problemas. Analizan el mundo con intención de entender cómo funcionan las cosas. Escépticos y pragmáticos. Orgullosos de su ingenio. Líderes estratégicos, con fuerza de voluntad. Tranquilos y serenos, se dejan guiar por la lógica. Disfrutan con la tecnología. A veces se ven como personas frías y distantes.
								</div>
							</td>
							</tr>
						</table>
					</div>	
				</div>		
			</p>
		</div>
		<?php require_once 'columnaDerecha.php';?>
		<?php require_once 'pie.php';?>
	</div>	
 	</body>
</html>

